
var lis=["学习 JavaScript","学习 HTML5","学习 CSS3"]

var qu=document.querySelector('#ipt')
var jia=document.querySelector('#tian')

// jia.addEventListener('click',function() {
//     var li=document.createElement('li')
//     li.classList.add('list-group-item')
//     li.classList.add('d-flex')
//     li.classList.add('justify-content-between')
//     li.classList.add('align-items-center')
//
//     var span=document.createElement('span')
//     var spann=document.createTextNode(qu.value)
//     span.appendChild(spann)
//     var button=document.createElement('button')
//     button.classList.add('close')
//     button.type='button'
//     button.innerHTML='&times;'
//     button.addEventListener('click',function () {
//         ul.removeChild(this.parentNode)
//     })
//     li.appendChild(span)
//     li.appendChild(button)
//
//     if (qu.value==""){
//         alert("请输入任务")
//     }else {
//         ul.appendChild(li)
//     }
//
// })

function d() {

        document.querySelector('#ul').innerHTML=""

    for(let  i=0;i<lis.length;i++){

        var li=document.createElement('li')

        li.classList.add('list-group-item')
        li.classList.add('d-flex')
        li.classList.add('justify-content-between')
        li.classList.add('align-items-center')

        var span=document.createElement('span')
        var spann=document.createTextNode(lis[i])
        span.appendChild(spann)
        span.addEventListener('dblclick',function () {
            this.setAttribute('contenteditable',true)
        })

        var button=document.createElement('button')

        button.classList.add('close')
        button.type='button'
        button.innerHTML='&times;'
        console.log(i)
        button.addEventListener('click',function () {
            console.log(i)
            lis.splice(i,1)
            d()
        })


        li.appendChild(span)
        li.appendChild(button)


        var ul=document.querySelector("#ul")
        ul.appendChild(li)
    }
}

d()

jia.addEventListener('click',function () {
    if(qu.value!=""){
        lis.push(qu.value)
    }else {
        alert('请输入任务！')
    }

    d()
})